<template>
  <div>
    <el-select placeholder="请选择" v-model="courseId" filterable clearable>
      <el-option
        v-for="item in courses"
        :key="item.courseId"
        :label="item.courseName"
        :value="item.courseId"
      ></el-option>
    </el-select>
  </div>
</template>

<script>

export default {
  data() {
    //这里存放数据
    return {
      
      catId: 0,
      courses: [
        {
          label: "a",
          value: 1
        }
      ],
      courseId: "",
      subscribe: null,
    };
  },
  //监控data中的数据变化
  watch: {
    courseId(val) {
      this.PubSub.publish("courseId", val);
      for(let i=0;i<this.courses.length;i++){
        if(val === this.courses[i].courseId){
            this.PubSub.publish("courseDescript", this.courses[i].courseDescript);
        }
      }
      
    }
  },
  //方法集合
  methods: {
    getCatBrands() {
      this.$http({
        url: this.$http.adornUrl("/ly/classcoursecategory/courses/list"),
        method: "get",
        params: this.$http.adornParams({
          catId: this.catId
        })
      }).then(({ data }) => {
        this.courses = data.data;
      });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //监听三级分类消息的变化
    this.subscribe = PubSub.subscribe("catPath", (msg, val) => {
      this.courseId = ""
      if(val.length<1){
        return;
      }
      this.catId = val[val.length - 1];
      this.getCatBrands();
    });
  },
  beforeDestroy() {
    PubSub.unsubscribe(this.subscribe); //销毁订阅
  }//生命周期 - 销毁之前
};
</script>
<style scoped>
</style>